<!--
此文件为开发者工具生成，生成时间: 2022/12/28下午1:37:01
使用方法：
在 C:\Users\Hello\Desktop\erabbit\pages\index\index.wxml 引入模板

```
<import src="index.skeleton.wxml"/>
<template is="skeleton" wx:if="{{loading}}" />
```

在 C:\Users\Hello\Desktop\erabbit\pages\index\index.wxss 中引入样式
```
@import "./index.skeleton.wxss";
```

更多详细信息可以参考文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/skeleton.html
-->
<template name="skeleton">
  <view class="sk-container">
    <view class="g-page">
      <view class="m-navbar">
        <view class="logowrap">
          <image class="logo sk-image"></image>
          <text class="sk-transparent sk-text-14-2857-989 sk-text">新鲜 . 亲民 . 快捷</text>
        </view>
        <view class="search">
          <view class="u-icon icon--u-icon data-v-172979f2 icon--data-v-172979f2 u-icon--right icon--u-icon--right" data-event-opts="tap,clickHandler,$event">
            <text class="u-icon__icon icon--u-icon__icon data-v-172979f2 icon--data-v-172979f2 uicon-scan icon--uicon-scan sk-transparent sk-text-0-0000-121 sk-text" style="font-size:32px;line-height:32px;font-weight:normal;top:0px;color:#fff"></text>
          </view>
          <!--  -->
          <view style="flex:1;margin:0 4px;">
            <view class="m-search ugo-search--m-search">
              <view class="u-search search--u-search data-v-1a326067 search--data-v-1a326067" data-event-opts="tap,clickHandler,$event" style="margin:0">
                <view class="u-search__content search--u-search__content data-v-1a326067 search--data-v-1a326067" style="background-color:#f2f2f2;border-radius:100px;border-color:transparent;">
                  <view class="u-search__content__icon search--u-search__content__icon data-v-1a326067 search--data-v-1a326067">
                    <view class="u-icon icon--u-icon data-v-172979f2 icon--data-v-172979f2 u-icon--right icon--u-icon--right" data-event-opts="tap,clickHandler,$event">
                      <text class="u-icon__icon icon--u-icon__icon data-v-172979f2 icon--data-v-172979f2 uicon-search icon--uicon-search sk-transparent sk-text-0-0000-232 sk-text" style="font-size:22px;line-height:22px;font-weight:normal;top:0px;color:#909399"></text>
                    </view>
                  </view>
                  <view class="u-search__content__input search--u-search__content__input data-v-1a326067 search--data-v-1a326067 sk-image" data-event-opts="blur,blur,$event,confirm,search,$event,input,inputChange,$event,focus,getFocus,$event" maxlength="-1"
                    placeholder="搜索商品" placeholder-class="u-search__content__input--placeholder" placeholder-style="color: #909399" style="text-align:left;color:#606266;background-color:#f2f2f2;height:32px" type="text" value="true" selection-start="-1"
                    selection-end="-1" cursor="-1"></view>
                </view>
                <text class="u-search__action search--u-search__action data-v-1a326067 search--data-v-1a326067 false search--false sk-transparent sk-opacity" data-event-opts="tap,custom,$event" style="true">搜索</text>
              </view>
            </view>
          </view>
          <view class="u-icon icon--u-icon data-v-172979f2 icon--data-v-172979f2 u-icon--right icon--u-icon--right" data-event-opts="tap,clickHandler,$event">
            <text class="u-icon__icon icon--u-icon__icon data-v-172979f2 icon--data-v-172979f2 uicon-account icon--uicon-account sk-transparent sk-text-0-0000-560 sk-text" style="font-size:32px;line-height:32px;font-weight:normal;top:0px;color:#fff"></text>
          </view>
        </view>
      </view>
      <scroll-view class="m-scrollview" data-event-opts="refresherrefresh,refresh,$event,scrolltolower,loadMore,$event" refresher-enabled="true" scroll-y="true">
        <swiper autoplay="false" circular="true" class="m-banner" indicator-dots="true" current="0"></swiper>
        <view class="m-category">
          <view class="item" data-event-opts="tap,gotoCategory,$0,categoryList,id,1005000,id">
            <image class="icon sk-image"></image>
            <view class="name sk-transparent sk-text-14-2857-131 sk-text" style="background-position-x: 50%;">居家</view>
          </view>
          <view class="item" data-event-opts="tap,gotoCategory,$0,categoryList,id,1005002,id">
            <image class="icon sk-image"></image>
            <view class="name sk-transparent sk-text-14-2857-969 sk-text" style="background-position-x: 50%;">美食</view>
          </view>
          <view class="item" data-event-opts="tap,gotoCategory,$0,categoryList,id,1010000,id">
            <image class="icon sk-image"></image>
            <view class="name sk-transparent sk-text-14-2857-605 sk-text" style="background-position-x: 50%;">服饰</view>
          </view>
          <view class="item" data-event-opts="tap,gotoCategory,$0,categoryList,id,1011000,id">
            <image class="icon sk-image"></image>
            <view class="name sk-transparent sk-text-14-2857-801 sk-text" style="background-position-x: 50%;">母婴</view>
          </view>
          <view class="item" data-event-opts="tap,gotoCategory,$0,categoryList,id,1013001,id">
            <image class="icon sk-image"></image>
            <view class="name sk-transparent sk-text-14-2857-284 sk-text" style="background-position-x: 50%;">个护</view>
          </view>
          <view class="item" data-event-opts="tap,gotoCategory,$0,categoryList,id,1019000,id">
            <image class="icon sk-image"></image>
            <view class="name sk-transparent sk-text-14-2857-665 sk-text" style="background-position-x: 50%;">严选</view>
          </view>
          <view class="item" data-event-opts="tap,gotoCategory,$0,categoryList,id,1043000,id">
            <image class="icon sk-image"></image>
            <view class="name sk-transparent sk-text-14-2857-168 sk-text" style="background-position-x: 50%;">数码</view>
          </view>
          <view class="item" data-event-opts="tap,gotoCategory,$0,categoryList,id,109243029,id">
            <image class="icon sk-image"></image>
            <view class="name sk-transparent sk-text-14-2857-996 sk-text" style="background-position-x: 50%;">运动</view>
          </view>
          <view class="item" data-event-opts="tap,gotoCategory,$0,categoryList,id,19999999,id">
            <image class="icon sk-image"></image>
            <view class="name sk-transparent sk-text-14-2857-603 sk-text" style="background-position-x: 50%;">杂项</view>
          </view>
          <view class="item" data-event-opts="tap,gotoCategory,$0,categoryList,id,999999,id">
            <image class="icon sk-image"></image>
            <view class="name sk-transparent sk-text-14-2857-396 sk-text" style="background-position-x: 50%;">品牌</view>
          </view>
        </view>
        <view class="m-hot m-section">
          <view class="item" data-event-opts="tap,gotoRecommend,$0,hotList,id,5,type">
            <view class="title sk-transparent">特惠推荐
              <text class="sk-transparent sk-text-14-2857-792 sk-text">精选全攻略</text>
            </view>
            <view class="pics">
              <image class="pic sk-image" mode="aspectFit"></image>
              <image class="pic sk-image" mode="aspectFit"></image>
            </view>
          </view>
          <view class="item" data-event-opts="tap,gotoRecommend,$0,hotList,id,6,type">
            <view class="title sk-transparent">爆款推荐
              <text class="sk-transparent sk-text-14-2857-856 sk-text">最受欢迎</text>
            </view>
            <view class="pics">
              <image class="pic sk-image" mode="aspectFit"></image>
              <image class="pic sk-image" mode="aspectFit"></image>
            </view>
          </view>
          <view class="item" data-event-opts="tap,gotoRecommend,$0,hotList,id,7,type">
            <view class="title sk-transparent">一站买全
              <text class="sk-transparent sk-text-14-2857-609 sk-text">精心优选</text>
            </view>
            <view class="pics"></view>
          </view>
          <view class="item" data-event-opts="tap,gotoRecommend,$0,hotList,id,8,type">
            <view class="title sk-transparent">新鲜好物
              <text class="sk-transparent sk-text-14-2857-133 sk-text">生活加分项</text>
            </view>
            <view class="pics"></view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
	/*
此文件为开发者工具生成，生成时间: 2022/12/28下午1:37:01

在 C:\Users\Hello\Desktop\erabbit\pages\index\index.wxss 中引入样式
```
@import "./index.skeleton.wxss";
```

更多详细信息可以参考文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/skeleton.html
*/
.sk-transparent {
    /* color: transparent !important; */
  }
.sk-text-14-2857-989 {
    /* background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important; */
    background-size: 100% 36.0938rpx;
    position: relative !important;
  }
.sk-text {
    background-origin: content-box !important;
    background-clip: content-box !important;
    /* background-color: transparent !important; */
    /* color: transparent !important; */
    background-repeat: repeat-y !important;
  }
.sk-text-0-0000-121 {
    /* background-image: linear-gradient(transparent 0.0000%, #EEEEEE 0%, #EEEEEE 100.0000%, transparent 0%) !important; */
    background-size: 100% 75.0000rpx;
    position: relative !important;
  }
.sk-text-0-0000-232 {
    /* background-image: linear-gradient(transparent 0.0000%, #EEEEEE 0%, #EEEEEE 100.0000%, transparent 0%) !important; */
    background-size: 100% 51.5625rpx;
    position: relative !important;
  }
.sk-opacity {
    opacity: 0 !important;
  }
.sk-text-0-0000-560 {
    /* background-image: linear-gradient(transparent 0.0000%, #EEEEEE 0%, #EEEEEE 100.0000%, transparent 0%) !important; */
    background-size: 100% 75.0000rpx;
    position: relative !important;
  }
.sk-text-14-2857-131 {
    /* background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important; */
    background-size: 100% 36.0938rpx;
    position: relative !important;
  }
.sk-text-14-2857-969 {
    /* background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important; */
    background-size: 100% 36.0938rpx;
    position: relative !important;
  }
.sk-text-14-2857-605 {
    /* background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important; */
    background-size: 100% 36.0938rpx;
    position: relative !important;
  }
.sk-text-14-2857-801 {
    /* background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important; */
    background-size: 100% 36.0938rpx;
    position: relative !important;
  }
.sk-text-14-2857-284 {
    /* background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important; */
    background-size: 100% 36.0938rpx;
    position: relative !important;
  }
.sk-text-14-2857-665 {
    /* background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important; */
    background-size: 100% 36.0938rpx;
    position: relative !important;
  }
.sk-text-14-2857-168 {
    /* background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important; */
    background-size: 100% 36.0938rpx;
    position: relative !important;
  }
.sk-text-14-2857-996 {
    /* background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important; */
    background-size: 100% 36.0938rpx;
    position: relative !important;
  }
.sk-text-14-2857-603 {
    /* background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important; */
    background-size: 100% 36.0938rpx;
    position: relative !important;
  }
.sk-text-14-2857-396 {
    /* background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important; */
    background-size: 100% 36.0938rpx;
    position: relative !important;
  }
.sk-text-14-2857-792 {
    /* background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important; */
    background-size: 100% 32.8125rpx;
    position: relative !important;
  }
.sk-text-14-2857-856 {
    /* background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important; */
    background-size: 100% 32.8125rpx;
    position: relative !important;
  }
.sk-text-14-2857-609 {
    /* background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important; */
    background-size: 100% 32.8125rpx;
    position: relative !important;
  }
.sk-text-14-2857-133 {
    /* background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important; */
    background-size: 100% 32.8125rpx;
    position: relative !important;
  }
.sk-image {
    /* background: #EFEFEF !important; */
  }
.sk-container {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: transparent;
  }


.g-page {
  display: flex;
  flex-direction: column;
  background: #f7f7f8;
  height: 100vh;
}
.m-scrollview {
  flex: 1;
  overflow: hidden;
}
.m-navbar {
  padding: 20px 0 12rpx;
  background-image: url();
  overflow: hidden;
}
.m-navbar .logowrap {
  display: flex;
  height: 64rpx;
  margin-bottom: 24rpx;
  align-items: center;
}
.m-navbar .logowrap text {
  margin: 2rpx 0 0 20rpx;
  padding-left: 20rpx;
  font-size: 26rpx;
  color: #fff;
  border-left: 1px solid #fff;
}
.m-navbar .logo {
  width: 166rpx;
  height: 39rpx;
  margin-left: 30rpx;
}
.m-navbar .search {
  display: flex;
}
.m-banner {
  width: 750rpx;
  height: 280rpx;
}
.m-banner image {
  width: 100%;
  height: 100%;
}
.m-category {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20rpx;
  padding: 10rpx 0;
}
.m-category .item {
  width: 150rpx;
  text-align: center;
  margin-bottom: 28rpx;
}
.m-category .item .icon {
  width: 100rpx;
  height: 100rpx;
}
.m-category .item .name {
  color: #666;
  font-size: 26rpx;
}
.m-section {
  margin: 20rpx;
  background: #fff;
  border-radius: 10rpx;
  overflow: hidden;
}
.m-section .title {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.m-section .title .text {
  padding: 24rpx 0 0 24rpx;
  font-size: 32rpx;
  color: #262626;
}
.m-section .title .more {
  padding-right: 24rpx;
  font-size: 26rpx;
  color: #7f7f7f;
}
.m-section .wrap {
  display: flex;
}
.m-section .item .name {
  margin: 20rpx 0 16rpx;
  font-size: 28rpx;
  color: #262626;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.m-hot {
  display: flex;
  flex-wrap: wrap;
}
.m-hot .item {
  display: flex;
  flex-direction: column;
  width: 50%;
  height: 254rpx;
  border-right: 1rpx solid #eee;
  border-top: 1rpx solid #eee;
}
.m-hot .item:nth-child(-n+2) {
  border-top: none;
}
.m-hot .item:nth-child(2n) {
  border-right: none;
}
.m-hot .item .title {
  justify-content: flex-start;
  padding: 24rpx 24rpx 0;
  font-size: 32rpx;
  color: #262626;
  position: relative;
}
.m-hot .item .title text {
  font-size: 24rpx;
  color: #7f7f7f;
  margin-left: 18rpx;
}
.m-hot .item .pics {
  display: flex;
  flex: 1;
  padding: 15rpx 20rpx;
}
.m-hot .item .pics .pic {
  width: 100%;
  height: 100%;
}
.m-fresh .title {
  display: flex;
}
.m-fresh .item {
  width: 25%;
  padding: 15rpx 20rpx 20rpx;
  line-height: 1;
  text-align: center;
}
.m-fresh .item .pic {
  width: 126rpx;
  height: 126rpx;
}
.m-fresh .item .price {
  line-height: 1;
  text-align: left;
  font-size: 26rpx;
  color: #cf4444;
}
.m-brand .item {
  width: 25%;
  text-align: center;
  padding: 15rpx 20rpx 20rpx;
  line-height: 1;
}
.m-brand .item .logo {
  width: 126rpx;
  height: 126rpx;
}
.m-brand .item .desc {
  font-size: 24rpx;
  color: #999;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.m-topic .wrap {
  justify-content: space-between;
  padding: 15rpx 20rpx;
}
.m-topic .item {
  width: 325rpx;
}
.m-topic .item .pic {
  width: 325rpx;
  height: 164rpx;
  border-radius: 4rpx;
}
.m-topic .item .price {
  margin-top: 16rpx;
  font-size: 24rpx;
  color: #999;
}
.m-topic .item .info {
  display: flex;
  flex-wrap: nowrap;
  font-size: 22rpx;
  margin-top: 16rpx;
}
.m-topic .item .info .collect,
.m-topic .item .info .viewnum {
  display: flex;
  margin-right: 20rpx;
  color: #666;
}
.m-guess .caption {
  display: flex;
  justify-content: center;
  line-height: 1;
  padding: 36rpx 0 40rpx;
  font-size: 32rpx;
  color: #262626;
}
.m-guess .caption .text {
  display: block;
  padding: 0 28rpx 0 30rpx;
  position: relative;
}
.m-guess .caption .text::before, .m-guess .caption .text::after {
  content: "";
  position: absolute;
  top: 6rpx;
  width: 20rpx;
  height: 20rpx;
  background-image: url();
  background-size: contain;
}
.m-guess .caption .text::before {
  left: 0;
}
.m-guess .caption .text::after {
  right: 0;
}
.m-guess .guesswrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 20rpx;
}
.m-guess .guesswrap .item {
  width: 345rpx;
  padding: 24rpx 20rpx 20rpx;
  margin-bottom: 20rpx;
  border-radius: 10rpx;
  overflow: hidden;
  background-color: #fff;
}
.m-guess .guesswrap .item .pic {
  width: 100%;
  height: 260rpx;
}
.m-guess .guesswrap .item .name {
  height: 75rpx;
  margin: 10rpx 0;
  font-size: 28rpx;
  color: #262626;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.m-guess .guesswrap .item .price {
  line-height: 1;
  padding-top: 4rpx;
  color: #cf4444;
  font-size: 26rpx;
}

</style>
